<template>
    <ContentField>
        <div class="card single-user" v-for="user in users" :key="user.id" @click="open_user_profile(user.id)">
            <div class="card-body" >
                <div class="row">
                    <div class="col-1">
                        <img class="img-fluid" :src="user.photo" alt="">
                    </div>
                    <div class="col-11">
                        <div class="username">{{ user.username }}</div>
                        <div class="follower_count">粉丝数：{{ user.follower_count }}</div>
                    </div>
                </div>
            </div>
        </div>
        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item" style="cursor: pointer;" @click="click_page(-1)">
                    <a class="page-link">前一页</a>
                </li>
                <li :class="'page-item ' + page.is_active"  v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                    <a class="page-link" href="#">{{ page.number }}</a>
                </li>
                <li class="page-item" @click="click_page(-2)">
                    <a class="page-link" href="#">后一页</a>
                </li>
            </ul>
        </nav>
    </ContentField>
</template>

<script>
import ContentField from '../components/ContentField.vue';
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import router from '../router/index';

export default {
    name: 'UserListView',
    components: {
        ContentField,
    },
    setup() {
        let users = ref([]);//从后端传来的用户信息，为数组
        let current_page = 1;//当前的页码号，默认为1
        let total_users = 0;
        let pages = ref([]);

        const store = useStore();

        const click_page = page => {
            let max_page = parseInt(Math.ceil(total_users / 3));
            if(page === -1 && current_page !== 1) {
                page = current_page - 1;
            }
            if(page === -2 && current_page != max_page) {
                page = current_page + 1;
            }
            if(page >= 1 && page <= max_page) {
                console.log(page);
                pull_page(page);
            }
        };

        const pull_page = page => {
            current_page = page;
            $.ajax({
                url: 'http://127.0.0.1:3005/myspace/userlist/',
                type: 'get',
                data: {
                    page,
                },
                success(resp) {
                    users.value = resp.users;
                    total_users = resp.users_count;

                    update_page();
                }
            });
        };

        const update_page = () => {
            let max_pages = parseInt(Math.ceil(total_users / 3));
            let new_pages = [];
            for(let i = current_page - 1; i <= current_page + 1; i++) {
                if(i >= 1 && i <= max_pages) {
                new_pages.push({
                    number: i,
                    is_active: i === current_page ? "active": "",
                });
                }
            }
            pages.value = new_pages;
            // console.log(pages.value);
        }
        pull_page(current_page);

        const open_user_profile = id => {
            if(store.state.user.is_login) {
                //跳转到用户动态页面
                router.push({
                    name: 'userprofile',
                    params: {
                        userId: id,
                    }
                });
            }else {
                //跳转到登录页面
                router.push({
                    name: 'login',
                });
            }
        };

        return {
            users,
            click_page,
            pages,
            open_user_profile,
        }
    },
}
</script>

<style scoped>
.username {
    font-weight: bold;
    font-size: 1.2em;
    font-style: italic;
}

.follower_count {
    color: gray;
    font-size: 0.8em;
}

img {
    border-radius: 50%;
}

.single-user {
    margin-bottom: 20px;
}

.single-user:hover {
    box-shadow: 5px 5px 10px lightgray;
    cursor: pointer;
}
</style>